<template>
  <div class="home">
    <van-search
      class="search"
      v-model="value"
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
    />
    <div class="home_body">
      <van-tabs @change="onChange">
        <van-tab v-for="(item,index) in navs" :key="index" :title="item"></van-tab>
      </van-tabs>

      <div class="home_pull">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="(item,index) in news" :key="index" :title="item.title" />
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      navs: ["娱乐", "音乐", "体育", "明星", "美女", "帅哥", "电视剧"],
      refreshing: false,
      loading: false,
      finished: false
    };
  },
  mounted() {
    this.$store.dispatch("refreshData", this.navs[0]);
  },
  watch:{
    news:function() {
      this.loading = false;
    }
  },
  computed: {
    news: function() {
      return this.$store.state.news;
    }
    //  refreshing:function () {
    //    return this.$store.state.refreshing;
    //  },
    //  loading:function () {
    //    return this.$store.state.loading;
    //  },
    //  finished:function () {
    //    return this.$store.state.finished;
    //  }
  },
  methods: {
    onChange(name, title) {
      console.log(name);
      console.log(title);
    },
    onRefresh() {
      console.log(11111111111);
    },
    onLoad() {
      console.log(2222222222);
    }
  }
};
</script>

<style scoped>
.home {
  width: 100%;
  border: 1px solid #000;
}
.search {
  width: 100%;
  position: fixed;
  top: 0px;
}
.home_body {
  width: 100%;
  border: 1px solid red;
  margin-top: 60px;
}
.home_pull {
  width: 100%;
}
</style>